<template>
  <div class="creator-view-wrapper">
    <creator-top-nav class="creator-top-nav"></creator-top-nav>

    <div class="creator-main-wrapper">
      <div class="creator-main clearfix">
        <left-bar class="left-bar"></left-bar>

        <div class="content">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CreatorTopNav from '../components/CreatorTopNav.vue';
import LeftBar from '../components/LeftBar.vue';

  export default {
    components: {
      CreatorTopNav,
      LeftBar,
      // HoverClickButton
    },
    data() {
      return {
        ifSelect: false
      }
    },
    methods: {
      select() {
        this.ifSelect = !this.ifSelect;
      }
    },
  }
</script>

<style lang="less" scoped>
@import url('../assets/style/base.css');

.creator-top-nav {
  position: fixed;
  z-index: 9999;
  top: 0;
}

.creator-view-wrapper {
  padding-top: 70px;
}

.creator-main-wrapper {
  .creator-main {
    --w: var(--innerWidth);
    --w1: var(--creatorWidth1);
    --w2: var(--creatorWidth2);
    width: var(--innerWidth);
    margin: 0 auto;

    .left-bar,
    .content {
      min-height: 700px;
      margin-bottom: 20px;
      background-color: white;
    }

    .left-bar {
      --leftBarListHeight: 50px;
      --leftBarWidth: var(--w1);
      float: left;
    }

    .content {
      --w: var(--w2);
      float: right;
      width: var(--w2);
    }
  }
}
</style>